<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :maskClosable="false"
    :ok-button-props="{ props: { disabled: disableSubmit } }"
    :fullscreen="true"
    @close="close"
    cancelText="关闭"
  >
    <template slot="footer">
      <a-button key="back" style="padding-left: 8px; padding-right: 8px" @click="close(false)"> 关闭 </a-button>
    </template>
    <a-spin :spinning="loading">
      <div :class="{ isCheck: isCheck }">
        <a-table
          class="edit-list"
          ref="table"
          size="middle"
          bordered
          width="100vw"
          :pagination="ipagination"
          :loading="loading"
          :columns="columns"
          :dataSource="dataSource"
          @change="handleTableChange"
          :customRow="handleClickRow"
          :scroll="{ x: true }"
        >
          <!-- 表头 -->
          <div slot="title">
            <div class="title">{{ model.docCode }}</div>
            <div class="sub-title" v-if="dataSource.length > 0">
              <div>填报单位：{{ model.accName }}</div>
              <div>{{ dataSource[0].vchDate }}</div>
              <div>附件：{{ dataSource[0].attachments || 0 }} 张</div>
              <div>{{ dataSource[0].docCode || '' }}</div>
            </div>
          </div>
        </a-table>
        <table v-if="assistData.length > 0" border="1" align="center" valign="center" class="assist-table">
          <tr style="text-align: center">
            <th v-for="(item, index) in assistData" :key="index" class="assist-table-title">{{ item.sortName }}</th>
          </tr>
          <tr style="text-align: center">
            <td v-for="(item, index) in assistData" :key="index + 1" class="assist-table-item">{{ item.itemName }}</td>
          </tr>
        </table>

        <div v-else>
          <a-divider />
          <a-empty style="margin-top: 20px">
            <div slot="description">
              <span v-if="!assistLoading">暂无数据，请点击上方表格其他行，查看数据</span>
              <a-spin v-else />
            </div>
          </a-empty>
        </div>
      </div>
    </a-spin>
  </j-modal>
</template>
<script>
import columns from './columns'
import { deleteAction, getAction, postAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  name: 'CheckAndEditModel',
  mixins: [JeecgListMixin],
  components: {},
  data() {
    return {
      columns: columns(this),
      queryParam: {
        id:"",
      },
      loading: false,
      visible: false,
      isCheck: false,
      disableSubmit: false,
      title: '凭证',
      url: {
        list: '/sjyzzx/sjZxzyAccountVouche/queryAccountVoucheById',
        assistList: '/sjyzzx/sjZxzyAssistAccount/queryAssistByEntryId'
      },
      assistData: [],
      assistLoading: false,
      model: {},
      disableMixinCreated: true
    }
  },
  created() {},
  methods: {
    check(record) {
      this.queryParam.id = record.vchId
      this.model = Object.assign({}, record)
      this.loadData(1)
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
      this.assistData = []
      this.queryParam = {}
      this.dataSource = []
    },
    handleClickRow(record, index) {
      return {
        on: {
          click: () => {
            this.getAssistDetailData(record.id)
          }
        }
      }
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams() // 查询条件
      this.loading = true
      // this.dataSource=[]
      getAction(this.url.list, params).then(res => {
        if (res.success) {
          // update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          this.dataSource = res.result.records || res.result
          if (this.dataSource.length > 0) this.getAssistDetailData(this.dataSource[0].id)
          if (res.result.total) {
            this.ipagination.total = res.result.total
          } else {
            this.ipagination.total = 0
          }
          // update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
        } else {
          this.$message.error(res.message)
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    getAssistDetailData(entryId) {
      this.assistLoading = true
      this.assistData = []
      getAction(this.url.assistList, { entryId })
        .then(res => {
          if (res.success) {
            this.assistData = res.result
          } else {
            this.$message.warning(res.message)
          }
          this.assistLoading = false
        })
        .catch(err => {
          this.$message.warning('请求错误')
          this.assistLoading = false
        })
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/views/sj/css/checkAndEdit.less';
@import '~@/views/sj/sjxxzhbb/css/baobiaotable.less';
.table-header {
  margin-bottom: 10px;

  .table-title {
    font-weight: bold;
    margin-left: 15px;
  }
}
.edit-list {
  /deep/.ant-table td {
    white-space: nowrap;
  }
  .noborderInput {
    border: 0;
    padding: 0px 0px;
  }
}
.assist-table {
  border-color: #e8e8e8;
  width: 100%;
  .assist-table-title {
    text-align: center !important;
    color: #909399;
    font-size: 14px;
    font-weight: 700;
    padding: 0px 20px !important;
    // line-height: 35px;
    height: 35px;
    background-color: #fafafa;
  }
  .assist-table-item {
    padding: 8px;
    box-sizing: border-box;
    line-height: 20px;
  }
}
</style>
